<%--
  Created by IntelliJ IDEA.
  User: MrLang
  Date: 2019/9/23
  Time: 8:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色列表</title>
    <%@include file="../../common/header.jsp"%>
    <%@include file="../../common/ruoyi.jsp"%>
    <link rel="stylesheet" type="text/css" href="../../static/zTree_v3/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="../../static/zTree_v3/js/jquery.ztree.all.js" ></script>
</head>
<body>
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>
                            角色名称：<input type="text" name="role_name"/>
                        </li>
                        <li>
                            权限字符：<input type="text" name="role_key"/>
                        </li>
                        <li>
                            角色状态：<select name="status">
                            <option value="" style="display: none"></option>
                            <option value="0">启用</option>
                            <option value="1">禁用</option>
                        </select>
                        </li>
                        <%--<li class="select-time">--%>
                            <%--<label>创建时间： </label>--%>
                            <%--<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="startTime"/>--%>
                            <%--<span>-</span>--%>
                            <%--<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime"/>--%>
                        <%--</li>--%>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="query(1)"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick=""><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" data-toggle="modal" data-target="#myModal" onclick="qingkong()">
                <i class="fa fa-plus"></i> 新增角色
            </a>
            <%--<a class="btn btn-primary single disabled" onclick="" >--%>
                <%--<i class="fa fa-edit"></i> 修改--%>
            <%--</a>--%>
            <%--<a class="btn btn-danger multiple disabled" onclick="" shiro:hasPermission="system:role:remove">--%>
                <%--<i class="fa fa-remove"></i> 删除--%>
            <%--</a>--%>
            <%--<a class="btn btn-warning" onclick="" >--%>
                <%--<i class="fa fa-download"></i> 导出--%>
            <%--</a>--%>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table class="table table-bordered table-hover">
                <caption>角色信息</caption>
                <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>key</th>
                    <th>状态</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tb_role">
                </tbody>
            </table>
            <ul class="pagination">
                <li><span id="pageinfo"></span></li>
                <li><a href="javascript:void(0)" onclick="query(1)">首页</a></li>
                <li><a href="javascript:void(0)" onclick="query(pager.prev)">上页</a></li>
                <li><a href="javascript:void(0)" onclick="query(pager.next)">下页</a></li>
                <li><a href="javascript:void(0)" onclick="query(pager.last)">尾页</a></li>
                <li class="input-group">
                    <input type="number" name="curPage" max="${pager.last}" min="1" step="1" id="txtCurPage"  style="height:28px" />
                    <input type="button" class="button" value="Go" id="btn2"/>
                </li>
                 </li>

            </ul>


            <%--模板：html和js 分离--%>
            <script type="text/html" id="op">
                <div class="hidden-sm hidden-xs action-buttons">
                    <%--<a class="view blue" href="#" onclick="showSub()" >--%>
                        <%--<i class="ace-icon fa fa-search-plus "></i>查看--%>
                    <%--</a>--%>
                    <a class="add blue" href="#" onclick="showMenus({id})" data-toggle="modal" data-target="#perModal">
                        <i class="ace-icon fa fa-search-plus "></i>设置权限
                    </a>
                    <a class="green" href="#" onclick="updateone({rid})" data-toggle="modal" data-target="#myModal">
                        <i class="ace-icon fa fa-pencil "></i>编辑
                    </a>
                    <a class="red" href="#" onclick="deleterole({roleid})"  >
                        <i class="ace-icon fa fa-trash-o "></i>删除
                    </a>
                </div>
            </script>
        </div>
    </div>
</div>



<!-- 分配权限模态框 -->
<div class="modal fade" id="perModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="z-index: 2041">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">权限分配</h4>
            </div>
            <div class="modal-body" id="roleList">
                <%--绑定树形菜单--%>
                <ul id="tree" class="ztree"></ul>
                <%--绑定角色id--%>
                <input type="text" id="hidRoleId"/>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary" id="saveMenus"  data-toggle="modal" data-target="#perModal">保存</button>
            </div>
        </div>
    </div>
</div>
</div>
<!-- 分配权限模态框 -->
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel1">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body">
                <form role="form" id="form1">
                    <div class="form-group">
                        <label >角色名</label>
                        <input type="hidden" class="form-control" id="role_id" name="role_id1" value="0"/>
                        <input type="text" class="form-control" id="role_name" name="role_name1" />
                    </div>
                    <div class="form-group">
                        <label >角色键</label><input type="text" class="form-control" id="role_key" name="role_key1" />
                    </div>
                    <div class="form-group">
                        <label >状态：</label><input type="radio" name="status1" value="0" id="qiyong"/>启用
                        <input type="radio" name="status1" value="1" id="jinyong"/>禁用
                    </div>
                    <div class="form-group">
                        <label>备注</label><input type="text" class="form-control" id="remark" name="remark1" />
                    </div>
                    <%--<div class="form-group">--%>
                        <%--<label>创建时间</label><input type="date" class="form-control" id="startTime1" name="startTime1" />--%>
                    <%--</div>--%>
                    <%--<div class="form-group">--%>
                        <%--<label >更新时间</label><input type="date" class="form-control" id="endTime1" name="endTime1" />--%>
                    <%--</div>--%>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="add()" data-toggle="modal" data-target="#myModal">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>
<script>
    var layer;
    $(function () {
        layui.use('layer',function () {
            layer=layui.layer;
        });
    });
    var pager;
    //查询角色信息
    function query(pageNo){
        $.ajax({
            //请求的地址
            url:"${pageContext.request.contextPath}/role.action?method=query&pageNo="+pageNo,
            //提交方式
            type:"post",
            //携带参数
            data:$("#role-form").serialize(),
            //返回的数据的类型
            dataType:"json",
            //操作成功后的回调函数
            success:function(data){
                $("#tb_role").empty();//清空
                var list=data.data;    //list集合
                for(var i=0;i<list.length;i++){

                    var info=list[i];//获取每一个信息
                    var status=null;
                    if (info.status==0)
                    {
                        status='启用';
                    }
                    else {
                        status='禁用';
                    }
                    var tr="<tr>" +
                        "<td>"+info.role_id+"</td>" +
                        "<td>"+info.role_name+"</td>" +
                        "<td>"+info.role_key+"</td>" +
                        "<td>"+status+"</td>" +
                        "<td>"+info.remark+"</td>" +
                          "<td>"+$("#op").html().replace("{id}",info.role_id).replace("{roleid}",info.role_id).replace("{rid}",info.role_id)+"</td>" +
                        "</tr>";
                    $("#tb_role").append(tr);
                }
                pager=data;
                //初始化页码信息
                var str="总页数:"+data.pages+"/当前页:"+data.pageNo;
                $("#pageinfo").html(str);
                $("#txtCurPage").val(data.curPage);
            },
            error:function (e) {
                layer.msg(e);
            }
        });
    }
    $(function(){
        $("#btn2").click(function(){
            //获取要跳到的页码
            var pageNo=$("#txtCurPage").val();
            if(pageNo>pager.pages) pageNo=pager.pages;
            query(pageNo);
        });
    });
    $(function () {
        query(1);
    });

    function add() {
        // $.modal.confirm("确认要启用角色吗？", function() {
            $.ajax({

                type: "POST",
                url:"${pageContext.request.contextPath}/role.action?method=add",
                data:$("#form1").serialize(),
                dataType:'json',
                success:function(msg)
                {
                    layer.msg("角色添加成功");
                    query(pager.pageNo);
                }
            });
        // });
    }


    function showMenus(id) {
       $("#hidRoleId").val(id);
       //加载树形菜单
        createTree(id);
    }


    var zTree;
    //创建树型结构
    function createTree(roleid) {
        var setting = {
            //设置复选框
            check:{
                enable:true, //允许复选框
                chkStyle:'checkbox'
            },
            //视图
            view: {
                dblClickExpand: true,
                expandSpeed: ""
            },
            //异步加载
            async: {
                enable: true,//设置是否异步加载
                url:"${pageContext.request.contextPath}/role.action?method=queryMenus", //设置异步获取节点的 URL 地址
                otherParam: [ "roleid",roleid] //绑定的参数
            },
            //数据
            data: {
                simpleData: {
                    enable: true,
                    pIdKey: "parent_id", //绑定父级编号
                    idKey: "menu_id" //绑定主键id
                },
                key: {
                    checked: "checked",//绑定选中、没选中
                    name:"menu_name"//绑定名字
                }
            },
            callback: {
                //onAsyncSuccess: zTreeOnAsyncSuccess
            }
        };

        //初始化
        zTree = $.fn.zTree.init($("#tree"), setting);
        //默认展开
        zTree.expandAll(false);
    }


     $(function () {
           $("#saveMenus").click(function () {
               //获取树形菜单的选中的节点集合
                var nodes=zTree.getCheckedNodes(true);
                //初始化一个数组 :用来存储选中的菜单项的id
                var aryIds=[];
                for(var i=0;i<nodes.length;i++){
                    aryIds.push(nodes[i].menu_id);
                }
                //转换成字符串
                var ids=aryIds.join(",");

               $.ajax({
                   //请求的地址
                   url:"${pageContext.request.contextPath}/role.action?method=setMenus",
                   //提交方式
                   type:"post",
                   //携带参数
                   data:{roleid:$("#hidRoleId").val(),ids:ids},
                   //返回的数据的类型
                   dataType:"json",
                   //操作成功后的回调函数
                   success:function(data){
                        layer.msg(data.content);
                   },
                   error:function (e) {
                       alert(e);
                   }
               });


           });
     });
    function deleterole(role_id) {
        $.ajax({
            type:'GET',
            url:"${pageContext.request.contextPath}/role.action?method=deleterole&role_id="+role_id,
            dataType:'json',
            success:function (msg) {
                if (msg=1)
                {
                    layer.msg("删除成功");
                }
                query(pager.pageNo);
            },
            error:function (xhr,info,e) {
                alert("错误"+info+e);
            }
        });
    }
    function updateone(role_id) {
        $.ajax(
            {
                type:'GET',
                url:"${pageContext.request.contextPath}/role.action?method=updateone&role_id="+role_id,
                dataType:'json',
                success:function(msg)
                {
                    $("#role_id").val(msg.role_id);

                    $("#role_name").val(msg.role_name);
                    $("#role_key").val(msg.role_key);
                    $("#remark").val(msg.remark);
                    if (msg.status=='0')
                    {
                        $("#qiyong").prop("checked",true);
                    }
                    else {
                        $("#jinyong").prop("checked",true);
                    }
                },
                error:function (xhr,info,e) {
                    alert("错误"+info+e);
                }
            }
        );
    }
        function qingkong() {
            $("#form1")[0].reset();
            $("#role_id").val(0);
        }

</script>
